<template>
    <div>
        <div class="logo-box">
            <img src="@/assets/images/logo.png" alt="" />
            <h1>my-vue3.0-test</h1>
        </div>

        <div>
            <van-form @submit="signInBtn">
                <van-field
                    v-model="login.username"
                    name="username"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="login.password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px">
                    <van-button round block type="primary" native-type="submit"
                        >登录</van-button
                    >
                    <van-button
                        style="margin-top: 10px"
                        round
                        block
                        type="default"
                        native-type="button"
                        to="/reg"
                        >注册</van-button
                    >
                </div>
            </van-form>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Notify } from "vant";
interface loginFormType {
    username: string;
    password: string;
}

export default defineComponent({
    name: "login",
    setup() {
        const router = useRouter();
        const store = useStore();
        const login: loginFormType = reactive({
            username: "denghong",
            password: "123",
        });
        const signInBtn = async () => {
            await store.dispatch("user/A_login", login);
            Notify({
                type: "success",
                message: "登录成功",
                duration: 2000,
            });
            await store.dispatch("user/A_getInfo");
            router.push("/");
        };

        return { login, signInBtn };
    },
});
</script>

<style lang="scss" scoped>
.logo-box {
    margin-top: 50px;
    text-align: center;
    img {
        width: 20vw;
        height: auto;
    }
}
</style>
